import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Tooltip } from 'antd';
import { IconC } from '../../../../components';
import style from './default.less';

@connect(({ profitAndLossM }) => ({
  profitAndLossM,
}))
export default class useCard2 extends PureComponent {
  state = {};

  componentDidMount() {}

  // 保留两位小数
  changeNumber = (e) => {
    let value;
    if (isNaN(e)) {
      value = e;
    } else {
      value = Number(e)
        .toFixed(2)
        .replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
    }
    return value;
  };

  render() {
    const { top, bottom } = this.props;

    return (
      <div className={style.bondDeviation}>
        <div className={style.cardArea}>
          <Row gutter={{ lg: 5, xxl: 15 }}>
            <Col xs={8} lg={8} xxl={8}>
              {top && top.length ? (
                top[0] ? (
                  <div className={style.useCard}>
                    <IconC type={'goldenOne'} iconType={'original'} />
                    <span>TOP</span>
                    <Tooltip title={`${top[0].name}`}>
                      <p className={style.showDate}>{`${top[0].name}`}</p>
                    </Tooltip>
                    <Tooltip title={`${this.changeNumber(top[0].value)}`}>
                      <p className={top[0].value >= 0 ? style.showData : style.showData1}>{`${this.changeNumber(top[0].value)}`}</p>
                    </Tooltip>
                  </div>
                ) : null
              ) : null}
            </Col>
            <Col xs={8} lg={8} xxl={8}>
              {top && top.length ? (
                top[1] ? (
                  <div className={style.useCard}>
                    <IconC type={'goldenTwo'} iconType={'original'} />
                    <span>TOP</span>
                    <Tooltip title={`${top[1].name}`}>
                      <p className={style.showDate}>{`${top[1].name}`}</p>
                    </Tooltip>
                    <Tooltip title={`${this.changeNumber(top[1].value)}`}>
                      <p className={top[1].value >= 0 ? style.showData : style.showData1}>{`${this.changeNumber(top[1].value)}`}</p>
                    </Tooltip>
                  </div>
                ) : null
              ) : null}
            </Col>
            <Col xs={8} lg={8} xxl={8}>
              {top && top.length ? (
                top[2] ? (
                  <div className={style.useCard}>
                    <IconC type={'goldenThree'} iconType={'original'} />

                    <span>TOP</span>
                    <Tooltip title={`${top[2].name}`}>
                      <p className={style.showDate}>{`${top[2].name}`}</p>
                    </Tooltip>
                    <Tooltip title={`${this.changeNumber(top[2].value)}`}>
                      <p className={top[2].value >= 0 ? style.showData : style.showData1}>{`${this.changeNumber(top[2].value)}`}</p>
                    </Tooltip>
                  </div>
                ) : null
              ) : null}
            </Col>
          </Row>
          <Row gutter={{ lg: 5, xxl: 15 }} className={style.secRow}>
            <Col xs={8} lg={8} xxl={8}>
              {bottom && bottom.length ? (
                bottom[0] ? (
                  <div className={style.useCard1}>
                    <IconC type={'greyOne'} iconType={'original'} />
                    <span>BOTTOM</span>
                    <Tooltip title={`${bottom[0].name}`}>
                      <p className={style.showDate}>{`${bottom[0].name}`}</p>
                    </Tooltip>
                    <Tooltip title={`${this.changeNumber(bottom[0].value)}`}>
                      <p className={bottom[0].value >= 0 ? style.showData : style.showData1}>{`${this.changeNumber(bottom[0].value)}`}</p>
                    </Tooltip>
                  </div>
                ) : null
              ) : null}
            </Col>
            <Col xs={8} lg={8} xxl={8}>
              {bottom && bottom.length ? (
                bottom[1] ? (
                  <div className={`${style.useCard} ${style.useCard1}`}>
                    <IconC type={'greyTwo'} iconType={'original'} />
                    <span>BOTTOM</span>
                    <Tooltip title={`${bottom[1].name}`}>
                      <p className={style.showDate}>{`${bottom[1].name}`}</p>
                    </Tooltip>
                    <Tooltip title={`${this.changeNumber(bottom[1].value)}`}>
                      <p className={bottom[1].value >= 0 ? style.showData : style.showData1}>{`${this.changeNumber(bottom[1].value)}`}</p>
                    </Tooltip>
                  </div>
                ) : null
              ) : null}
            </Col>
            <Col xs={8} lg={8} xxl={8}>
              {bottom && bottom.length ? (
                bottom[2] ? (
                  <div className={`${style.useCard} ${style.useCard1}`}>
                    <IconC type={'greyThree'} iconType={'original'} />
                    <span>BOTTOM</span>
                    <Tooltip title={`${bottom[2].name}`}>
                      <p className={style.showDate}>{`${bottom[2].name}`}</p>
                    </Tooltip>
                    <Tooltip title={`${this.changeNumber(bottom[2].value)}`}>
                      <p className={bottom[2].value >= 0 ? style.showData : style.showData1}>{`${this.changeNumber(bottom[2].value)}`}</p>
                    </Tooltip>
                  </div>
                ) : null
              ) : null}
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}
